<template>
  <el-breadcrumb>
    <el-breadcrumb-item>公众监督数据管理</el-breadcrumb-item>
    <el-breadcrumb-item>指派网格员</el-breadcrumb-item>
  </el-breadcrumb>
  <DataDetails></DataDetails>

  <div class="assign">
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="是否异地指派">
        <el-switch v-model="isRemote" size="small" />
      </el-form-item>
    </el-form>

    <!-- 本地指派表单 -->
    <el-form :inline="true" class="demo-form-inline" v-if="!isRemote" size="small">
      <el-form-item label="指派给">
        <el-select v-model="gmIdLocal">
          <el-option
            :label="gridMember.gmName"
            :value="gridMember.gmId"
            v-for="gridMember in gridMemberLocalArr"
            :key="gridMember.gmId"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-popconfirm
          title="确定要指派吗?"
          confirm-button-text="确定"
          cancel-button-text="取消"
          @confirm="assignEvent"
        >
          <template #reference>
            <el-button>本地指派</el-button>
          </template>
        </el-popconfirm>
      </el-form-item>
    </el-form>

    <!-- 异地指派表单 -->
    <el-form :inline="true" class="demo-form-inline" v-if="isRemote" size="small">
      <el-form-item label="省区域">
        <el-select 
             v-model="provinceIdNoLocal"
             @change="changeProvince">
          <el-option
            :label="province.provinceName"
            :value="province.provinceId"
            v-for="province in provinceArr"
            :key="province.provinceId"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="市区域">
        <el-select 
            v-model="cityIdNoLocal"
            @change="changeCity">
          <el-option
            :label="city.cityName"
            :value="city.cityId"
            v-for="city in cityArr"
            :key="city.cityId"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="异地指派给">
        <el-select v-model="gmIdNoLocal">
          <el-option
            :label="gridMember.gmName"
            :value="gridMember.gmId"
            v-for="gridMember in gridMemberNoLocalArr"
            :key="gridMember.gmId"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-popconfirm
          title="确定要指派吗?"
          confirm-button-text="确定"
          cancel-button-text="取消"
          @confirm="assignEvent"
        >
          <template #reference>
            <el-button>异地指派</el-button>
          </template>
        </el-popconfirm>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import DataDetails from "../../components/DataDetails.vue";
import { ref, inject } from "vue";
import { useStore } from "vuex";
import { useRouter, useRoute } from "vue-router";
import { ElMessage } from "element-plus";
import { getCurDate, getCurTime } from "../../common.js";

const myElMessage = inject('myElMessage');
const router = useRouter();
const route = useRoute();
const axios = inject("axios");

//Switch开关组件需要的响应数据
const isRemote = ref(false);

//本地指派表单数据（本地的网格员编号、列表）
const gmIdLocal = ref(0);
const gridMemberLocalArr = ref([]);

//异地指派表单数据（异地的网格员编号、列表）
const gmIdNoLocal = ref(0);
const gridMemberNoLocalArr = ref([]);

//省列表和市列表
const provinceArr = ref([]);
const cityArr = ref([]);

//异地指派时需要的省和市
const provinceIdNoLocal = ref(0);
const cityIdNoLocal = ref(0);

const init = () => {
  //初始化1：查询本地网格员
  axios
    .post("gridMember/listGridMemberByProvinceId", {
      provinceId: route.query.provinceId,
      cityId: route.query.cityId,
      state: 0,
    })
    .then((response) => {
      gridMemberLocalArr.value = response.data;
      //只有存在至少一个本地网格员，才能设置第一个为默认
      if (gridMemberLocalArr.value.length > 0) {
        gmIdLocal.value = gridMemberLocalArr.value[0].gmId;
      }
    })
    .catch((error) => {
      console.log(error);
    });

  //初始化2：查询省市
  axios
    .post("gridProvince/listGridProvinceAll")
    .then((response) => {
      provinceArr.value = response.data;
      //设置省下拉列表默认为第一个
      provinceIdNoLocal.value = provinceArr.value[0].provinceId;
      //查询市
      listGridCityByProvinceId();
    })
    .catch((error) => {
      console.log(error);
    });
};
init();

const listGridCityByProvinceId = ()=>{
  axios
    .post("gridCity/listGridCityByProvinceId", {
      provinceId: provinceIdNoLocal.value
    })
    .then((response) => {
      cityArr.value = response.data;
      //设置市下拉列表默认为第一个
      cityIdNoLocal.value = cityArr.value[0].cityId;
      //查询异地网格员
      listGridMemberNoLocal();
    })
    .catch((error) => {
      console.log(error);
    });
}

//查询异地网格员
const listGridMemberNoLocal = ()=>{
  axios
    .post("gridMember/listGridMemberByProvinceId", {
      provinceId: provinceIdNoLocal.value,
      cityId: cityIdNoLocal.value,
      state: 0,
    })
    .then((response) => {
      gridMemberNoLocalArr.value = response.data;
      //只有存在至少一个异地网格员，才能设置第一个为默认
      if (gridMemberNoLocalArr.value.length > 0) {
        gmIdNoLocal.value = gridMemberNoLocalArr.value[0].gmId;
      }else{
        //系统管理员选择的省市也可能没有网格员
        gmIdNoLocal.value = 0;
      }
    })
    .catch((error) => {
      console.log(error);
    });
}

const changeProvince = ()=>{
  listGridCityByProvinceId(provinceIdNoLocal.value);
}

const changeCity = ()=>{
  listGridMemberNoLocal(provinceIdNoLocal.value,cityIdNoLocal.value);
}

const assignEvent = () => {
  let gmId = isRemote.value?gmIdNoLocal.value:gmIdLocal.value;

  if(gmId==0){
    myElMessage('请选择一个网格员！','warning');
    return;
  }

  axios
    .post("aqiFeedback/updateAqiFeedbackAssign", {
      gmId: gmId,
      assignDate: getCurDate(),
      assignTime: getCurTime(),
      state: 1,
      afId: route.query.afId
    })
    .then((response) => {
      if(response.data==1){
        router.push('/index/feedbackList');
      }else{
        myElMessage('指派失败！','error');
      }
    })
    .catch((error) => {
      console.log(error);
    });
};
</script>

<style scoped>
.assign {
  margin-top: 20px;
  display: flex;
  align-items: center;
}
</style>